<template>
	<view class="content">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">
				<text style="margin-right:20upx;">防控疫情</text>
				<text>人人有责</text> 
			</block>
		</cu-custom>
		<view class="heightbox"></view>
		<view class="content-center">
			<view class="content-border">
				<view class="cnt-top">
					<view class="thanks">
						<text class="recommend">感谢您对怀化新冠状病毒防疫工作的支持</text>
						<view class="gogogo">加油怀化!加油中国</view>
					</view>
					<view class="erm">
						<view class="erm-image">
							<image src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=7bcb659c9745d688a302b5a29cf91a23/2934349b033b5bb571dc8c5133d3d539b600bc12.jpg" mode=""></image>
						</view>
					</view>
					<view class="recommend recommend-em">
						<text class="recommend-employer">推介给员工填写信息</text>
					</view>
					<view class="recommend">
						请每天上午10点前上报信息
					</view>
				</view>
				 <form @submit="formSubmit" @reset="formReset">
					 <view class="uni-form-item uni-column">
					 	<view class="form-title">今日上报统计</view>
					 		<view class="goodname-input">
					 			<view class="textarea-input">总人数n人/未上报人数n</view>
					 		</view>
					</view>
					<view class="uni-form-item uni-column">
					 	<view class="form-title">未上报人数</view>
					 		<view class="goodname-input">
					 			<view class="textarea-input">张三\李四</view>
					 		</view>
					</view>
					<view class="uni-form-item uni-column">
					    <view class="form-title ">目前企业状态：</view>
						<radio-group name="radio" @change="fugongChange">
							<label class="form-radio">
								<radio class="radios" value="1" :checked="form.fugong == 1"/>
								<text class="radio-title">复工</text>
							</label>
							<label>
								<radio class="radios" value="2" :checked="form.fugong == 2" />
								<text class="radio-title">停工</text>
							</label>
						</radio-group>	
					</view>
					<view class="uni-form-item uni-column">
					    <view class="form-title">企业类型：</view>
						<view class="tab" @tap="toggleTab('selector')">
							<input class="uni-input " name="input" v-model="form.work" /><text class="cuIcon-unfold icon" ></text>
						</view>		
					</view>
					<view  class="uni-form-item uni-column">
					    <view class="form-title form-title-difecut">目前企业遇到的困难：</view>
						<view class="evan-checkbox-box">
							<view class="evan-checkbox-show" v-if="dificutDataList.length">
							   	<evan-checkbox-group  @change="onGroupChange" v-model="form.checklist">
							   		<view @click="toggleCheckbox2(index)" class="evan-checkbox-show__list-item" v-for="(item,index) in dificutDataList" :key="item.dictValue">
							   			<text class="evan-checkbox-show__list-item__label">{{item.dictLabel}}</text>
							   			<evan-checkbox ref="listCheckbox2" :preventClick="true" :label="item.dictValue"></evan-checkbox>
							   		</view>
							   	</evan-checkbox-group>
							</view>	
						</view>
						
					</view>
					<view class="uni-form-item uni-column">
						<view class="form-title">希望得到的支持</view>
						<view class="goodname-input">
							<textarea class="textarea-input" value="" v-model="form.content" placeholder="请在这里输入" />
						</view>
					</view>
				</form>
				<w-picker
					v-if="getpullList.length"
					mode="selector" 
					defaultVal=""
					@confirm="workConfirm" 
					ref="selector" 
					themeColor="#f00"
					:selectList="getpullList"
				></w-picker>
				<view class="submit-btn">
					<button class="login-btn" @click="formSubmit('DialogModal1')">提交信息</button>
				</view>
				<view class="cu-modal" :class="modalName == 'DialogModal1' ? 'show' : ''">
					<view class="cu-dialog">
						<view class="cu-dialog-top">
							<view class="gogogo">
								加油怀化！加油中国！
							</view>
							<view class="gogogo">
								感谢您对怀化新冠状病毒
							</view>
							<view class="gogogo">
								疫情工作的支持！
							</view>
						</view>
						<view class="cu-dialog-center">
							<view class="dialog-center-msg flex justify-center align-center">
								<view class="dialog-center-msg-icon">
									<view class="msg-icon">
										<icon type="success" size="26"/>
									</view>
									<view class="msg-icon">
										信息提交成功
									</view>
								</view>
							</view>
						</view>
						<view class="cu-dialog-bottom">
							<button class="buttom-btn" @click="submit">确 定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import evanCheckbox from "@/components/evan-checkbox/evan-checkbox.vue";
import EvanCheckboxGroup from '@/components/evan-checkbox/evan-checkbox-group.vue'
import UniIcons from '@/components/uni-icons/uni-icons.vue'
import chunLeiModal from '@/components/chunLei-modal/chunLei-modal.vue'
import wPicker from "@/components/w-picker/w-picker.vue";
export default {
	components:{
		wPicker,
		evanCheckbox,
		EvanCheckboxGroup,
		UniIcons
	},
	data() {
		return {
			modalName: null,
			checked:true,
			getpullList:[],
			dificutDataList:[],
			form: {
				fugong:0,
				checklist:null,
				work:"",
				content:""
			}
		};
	},
	created() {
		this.initall()
		console.log("6666")
		// setTimeout(() =>{
		// 	uni.hideLoading()
		// }, 80);
	},
	computed: {
		
	},
	methods: {
		hideModal1() {
			this.modalName = null;
		},
		onGroupChange(){
			console.log(this.checklist)
		},
		toggleCheckbox2(index) {
			this.$refs.listCheckbox2[index].toggle()
		},
		_dificutDataApi(){
			let that=this
			uni.request({
				url: 'http://39.100.86.3:8099/system/dict/data/dictType', //仅为示例，并非真实接口地址。
				method:'GET',
				data: {
					dictType:'sys_difficulty'
			     },
			    header: {
			         'X-Requested-With': 'XMLHttpRequest'
					},
			      success: (res) => {
					  that.dificutDataList=res.data;
					  console.log(that.dificutDataList)
					  // that.getpullList.forEach((item)=>{
						 //  item.value=item.dictValue;
						 //  item.label=item.dictLabel
					  // })
			      }
			  });
		},
		_getPullApi(){
			let that=this
			uni.request({
				url: 'http://39.100.86.3:8099/system/dict/data/dictType', //仅为示例，并非真实接口地址。
				method:'GET',
				data: {
					dictType:'sys_industry'
			     },
			    header: {
			         'X-Requested-With': 'XMLHttpRequest'
				},
				 success: (res) => {
					  that.getpullList=res.data;
					  that.getpullList.forEach((item)=>{
						  item.value=item.dictValue;
						  item.label=item.dictLabel
					 })
				 }
			  });
		},
		toggleTab(str){
			this.$refs[str].show();
		},
		workConfirm(val){
			console.log(val)
			this.form.work=val.result
		},
		fugongChange(e){
			this.form.fugong=e.detail.value
		},
		initall(){
			this._getPullApi()
			this._dificutDataApi()
		},
		
		formSubmit(value) {
			if(this.form.work==""||this.form.checklist==null||this.form.content==""){
				uni.showToast({
					title:this.form.work==""?"请选择企业类型":this.form.checklist==null?"请输入企业所遇到的困难":"请输入希望得到帮助"
				})
			}else{
				this.modalName = value;				
			}
			
			// console.log(this.form);
			// var checkNum = /^[0-9]+\.?[0-9]+?$/.test(this.form.money);
			// console.log(checkNum);
			// if (this.form.goodname == '') {
			// 	uni.showToast({ title: '请输入商品/服务名称', icon: 'none' });
			// } else if (this.form.money == '' || checkNum == false) {
			// 	uni.showToast({ title: '请输入数字金额', icon: 'none' });
			// } else if (this.form.selectlistshow == '') {
			// 	uni.showToast({ title: '投诉内容', icon: 'none' });
			// } else {
			// 	uni.showToast({ title: '操作成功', icon: 'success' });
			// }
		},
		submit(){
			this.modalName = null;
			uni.navigateTo({
				url:"../companycenter/index"
			})
		},
		formReset: function(e) {
			console.log('清空数据');
			this.chosen = '';
		}
	}
};
</script>

<style scoped lang="scss">
.content{
	height: 100%;
	background: linear-gradient(180deg, rgba(253, 253, 253, 1), rgba(246, 246, 246, 1));
	.heightbox {
		width: 100%;
		height: 105.88upx;
		background: #5064eb;
	}
	.content-center{
		padding: 0 30upx;
		padding-bottom: 176upx;
		.content-border{
			margin-top: -100upx;
			background: #fff;
			padding: 20upx;
			box-shadow: 0px 0px 30rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;
		}
	}	
}
.icon{
	    margin-top: -50upx;
	    position: absolute;
	    right: 50upx;
}
.cnt-top{
	padding-top: 50upx;
	text-align: center;
	color: red;
	font-size:28upx;
	.gogogo{
		font-size: 50upx;
		padding: 30upx;
		
	}
	.recommend{
		padding-top:20upx ;
		.recommend-employer{
			padding: 20upx 80upx;
			border: 1px solid #ccc;
			border-radius: 40upx;
			color: #333333;
		}
	}
	.recommend-em{
		padding: 30upx 0;
	}
	.erm{
		margin: 0 auto;
		// padding: 30upx 0;
		position: relative;
		height: 168upx;
		.erm-image{
			width: 168upx;
			height: 168upx;
			position: absolute;
			left: 50%;
			margin-left: -84upx;
			image{
				height: 100%;
				width: 100%;
			}
		}
	}
}
.uni-input{
	height: 75upx;
	background: white;
	border: 1px solid #eeeeee;
	border-radius: 37upx;
	line-height: 75upx;
	padding: 0 24upx;
	font-size: 30.58upx;
}
.uni-column{
	.form-title{
		font-weight: 700;
	}
	
	// margin-bottom: 20upx;
}
.form-title-difecut{
	margin-top: 20upx;
}
.form-radio{
	margin-right: 58.82upx;
}
.radios{
	transform: scale(0.7);
	margin-top: -5upx;
}
.submit-btn{
	padding-top: 80upx;
	.login-btn{
		margin-left: 0;
		width: 635upx;
		height: 88upx;	
		border-radius: 44upx;
		font-family: SourceHanSansCN-Medium;
		font-size: 30upx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 88upx;
		letter-spacing: 0px;
		color: #ffffff;
		background-color: #5064eb;
	}
}
.evan-checkbox-box{	
	padding: 20px;
}
.evan-checkbox-show {
 background: #fff;
	
&__title {
	padding: 10px 0;

	&__item {
		font-size: 16px;
		color: #333;
		font-weight: bold;
	}
}

&__group-item {
	margin-bottom: 10px;
}

&__list-item {
	display: flex;
	align-items: center;
	height: 50px;
	border-bottom: 1px solid #eee;

	&__label {
		font-size: 16px;
		color: #333;
		flex: 1;
		margin-right: 6px;
	}
}
}
.goodname-input {
	position: relative;
	padding: 14upx 0;
	.textarea-input{
		padding: 20upx;
		height:142upx;
		background:rgba(255,255,255,1);
		border:1px solid rgba(238,238,238,1);
		border-radius:16px;
		width: 100%;
		overflow-y:hidden ;
	}
	.round {
		height: 75upx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(238, 238, 238, 1);
		border-radius: 37upx;
		// text-indent: 24upx;
		line-height: 75upx;
		padding: 0 24upx;
	}
	.cuIcon-unfold {
		position: absolute;
		top: 37%;
		right: 3%;
	}
}
// 信息弹框
.cu-modal{
	.cu-dialog{
		width: 432upx;
		height: 545upx;
		// padding: 20upx;
		background:url("../../static/login/model.png") no-repeat;
		background-size:100%;
		border-radius: 10px;
		.cu-dialog-top{
			padding-top: 48upx;
			.gogogo{
				font-family: SourceHanSansCN-Medium;
				font-size: 24upx;
				font-weight: normal;
				font-stretch: normal;
				// line-height: 30upx;
				letter-spacing: 0px;
				color: #fffefe;
				text-align: center;
			}
			.gogogo:nth-child(1){
				font-size: 40upx;
			}
		}
		.cu-dialog-center{
			padding: 20upx 36upx;
			.dialog-center-msg{
				width: 365upx;
				height: 238upx;
				background-color: #ffffff;
				border-radius: 10px;
				
			}
		}
		.cu-dialog-bottom{
			padding: 10upx 20upx;
			.buttom-btn{
				width: 362upx;
				height: 56upx;
				background-color: #7383ef;
				box-shadow: 0px 7upx 7upx 0px rgba(68, 68, 68, 0.16);
				border-radius: 28upx;
				line-height: 56upx;
				color:#FFFFFF;
				
			}
		}
	}
} 
</style>
<style>
page {
	height: 100%;
	background: linear-gradient(180deg, rgba(253, 253, 253, 1), rgba(246, 246, 246, 1));
}
</style>

